<template>
  <div id="baseButton">
    <!-- 标题 -->
    <Title :title="title" />
    <el-card>
      <el-row v-if="role !== '学院'" class="header-box">
        <el-col :span="24">
          <el-col :span="6" style="margin-left: 20px">
            <el-input
              v-model="queryParams.keyword"
              placeholder="姓名，单位"
              class="input-with-select"
            />
          </el-col>
          <el-col :span="6">
            <el-select v-model="queryParams.apply_post" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button
              type="warning"
              @click="exportPersonnelList"
            >导出</el-button>
          </el-col>
          <el-col :span="12" />

          <!-- <el-row>

          </el-row> -->
          <el-button
            type="danger"
            @click="delete_all_Select"
          >批量删除</el-button>

          <el-dialog
            title="提示"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose"
          >
            <span>是否确认批量删除选择项?</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="ispur_deleteAll">确 定</el-button>
            </span>
          </el-dialog>

        </el-col>
      </el-row>
      <BaseTable
        :has-index="true"
        :has-border="true"
        :table-data="tableData"
        :table-data-total="total"
        :table-column-options="tableColumnOptions"
        @tableUpdate="tableUpdate"
        @selectionChange="selectionChange"
      >
        <!-- 类型插槽 -->
        <template #tag="{ data }">
          <div class="tag">
            <el-tag
              v-if="data.states == 0 || data.states == 2"
              type="danger"
            >未分配</el-tag>
            <el-tag v-else-if="data.states == 10" type="warning">分配中</el-tag>
            <el-tag v-else type="success">已分配</el-tag>
          </div>
        </template>
        <!-- 操作插槽 -->
        <template #school="{ data }">
          <div class="action">
            <el-link
              :underline="false"
              @click="handlePreview(data, true)"
            >查看
            </el-link>
            <el-link :underline="false" @click="downloadResume(data.id)">
              下载
            </el-link>
            <el-link
              v-if="role === '学院'"
              :underline="false"
              @click="handleUpload(data.id)"
            >
              上传意见
            </el-link>
            <el-link
              v-else
              :underline="false"
              @click="handlePreview(data, false)"
            >
              <i class="el-icon-upload2" />
              进入评审
            </el-link>
          </div>
        </template>

        <template #admin="{ data }">
          <div class="action">
            <el-link
              :underline="false"
              @click="handlePreview(data)"
            >查看
            </el-link>
            <!-- <el-link
              :underline="false"
              @click="handleOpinion(data.id)"
            >意见
            </el-link> -->
            <el-button class="opinion_input" type="text" @click="clickDialogVisible4(data.id)">意见</el-button>
            <el-link
              :underline="false"
              @click="handlePrint(data.id)"
            >打印
            </el-link>
            <el-link
              :underline="false"
              @click="handleLookAllocation(data.id)"
            >分配信息
            </el-link>
            <el-link :underline="false" @click="downloadResume(data.id)">
              下载
            </el-link>
            <el-link :underline="false" @click="deleted(data.id)">
              删除
            </el-link>
          </div>
        </template>
        <template #pingwei="{ data }">
          <div class="action">
            <el-link
              :underline="false"
              @click="handlePreview(data, true)"
            >查看
            </el-link>
            <el-link :underline="false" @click="downloadResume(data.id)">
              下载
            </el-link>
            <el-link :underline="false" @click="handlePreview(data, false)">
              进入评审
            </el-link>
          </div>
        </template>
      </BaseTable>
    </el-card>
    <!-- <LookInfo ref="lookInfo" @refresh="refresh" /> -->
    <el-dialog
      title="上传意见"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div style="display: flex; align-items: center">
        <div class="label" style="margin-right: 10px">是否建议引进：</div>
        <el-radio-group v-model="college_import">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </div>
      <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        :headers="headers"
        :file-list="fileList"
        :show-file-list="false"
        :on-success="onSuccess"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitIdea">提 交</el-button>
      </span>
    </el-dialog>
    <PersonList ref="personList" />
    <Pdf ref="pdf" />
    <!-- <Opinion ref="opinion" /> -->
    <Popup
      v-if="(role === '专家' || role === '评委') && !show"
      @open="handlePreview1"
    />
    
    <!-- 感谢弹框 -->
    <div class="thank" :style="styleN">
      <p @click="clickThank" id="thank1">&#10005</p>
        <p>感谢您百忙之中对引进人才的评价，同时也感谢你对西南交大的人才引进工作的支持，评价结束后，评价费用会于10日内汇款至您的银行卡，再次感谢您对西南交大的支持。</p>
        <p>西南交大人才工作办公室</p>
        <p>2022年7月28日</p>
    </div>
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible4"
  width="40%"
  :before-close="handleClose1">
   <el-form :model="form">
    <el-form-item label="请填写意见" :label-width="formLabelWidth">
      <el-input v-model="form.input_1" autocomplete="off" type="textarea"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible4 = false">取 消</el-button>
    <el-button type="primary" @click="putOpinion()">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import LookInfo from './lookInfo'
import config from './config'
import { getToken } from '@/utils/auth'
import { downloadFile } from '@/utils/utils'
import PersonList from './components/PersonList/index'
import Pdf from './components/Pdf'
// import Opinion from './components/Opinion/index.vue'
import Popup from './components/Popup'
import { deleteUserList } from '@/api/user.js'

import {
  getPersonnelType,
  getPersonnelList,
  uploadIdea,
  PostOpinion,
  exportPersonnelList,
  
} from '@/api/personnel'
const role = localStorage.getItem('role')
export default {
  components: {
    BaseTable,
    LookInfo,
    PersonList,
    Pdf,
    // Opinion,
    Popup
  },
  data () {
    return {
      dialogVisible4:false,
      styleN:'display: none',
      dialogVisible3: false,
      dialogVisible2: false,
      is_selectAll: 0,
      fileList: [],
      uploadUrl: process.env.VUE_APP_IMAGE_UPLOAD_URL,
      selects_id: [],
      headers: {
        token: getToken()
      },
      queryParams: {
        keyword: '',
        apply_post: '',
        page: 1
      },
      title: '',
      role,
      total: 0,
      // 表格组件--模拟数据
      tableData: [],
      /**
       * 表格列项数据 (必传)
       * label 表格列项名称
       * prop: ''
       * width 列项宽度
       * align       内容对齐方式 (默认居中)
       * headerAlign 表头对齐方式 (默认居中)
       * columnType  是否开启插槽
       * soltName    插槽名
       */
      tableColumnOptions: config.tableColumnOptions[role],
      options: [],
      id: '',
      dialogVisible: false,
      college_import: 1,
      imageUrl: '',
      college_opinion: '',
      show: sessionStorage.getItem('show') || false,
       form: {
          input_1:''
        },
        formLabelWidth: '70px',
        opinion_id:''
    }
  },
  created () {
    // 设置标题
    this.title = this.$route.meta.title
    this.getPersonnelType()
    this.getPersonnelList()
  },
  methods: {
    // 书写意见
    clickDialogVisible4(id){
      this.dialogVisible4 = true,
      this.opinion_id=id
    },

    putOpinion(){
        this.dialogVisible4 = false,
        this.PostOpinion({manage_opinion:this.form.input_1,personnel_id:this.opinion_id}),
        this.styleN='',
        this.form.input_1=''
    },

    clickThank(){
      this.styleN='display: none'
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
       handleClose1(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

    // open(id) {
    //     this.$prompt('请编辑意见或建议',  {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning ',
    //       customClass: 'winClass',//弹窗样式
    //       // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    //       // inputErrorMessage: '邮箱格式不正确'
    //     }).then(({ value }) => {
    //       this.$message({
    //         type: 'success',
    //         message: '您书写的意见是: ' + value,
            
            
    //       });
          
    //       this.input_1=value,
    //       console.log("111",this.input_1,"id",id);
    //       this.PostOpinion({manage_opinion:this.input_1,personnel_id:id})
    //       this.dialogVisible3 = true
    //       this.styleN=''
    //     }).catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '取消输入',
            
    //       });       
    //     });
        
    //   },
    async PostOpinion(data){
      const res = await PostOpinion(data)
      console.log("222",res)
    },
    ispur_deleteAll () { // 确认批量删除
      this.dialogVisible2 = false
      this.delete_All()
    },
    delete_all_Select () {
      if (this.is_selectAll === 0) {
        this.$message.error('请先选择删除项')
      } else {
        this.dialogVisible2 = true
      }
    },

    async delete_All () { // 批量删除
      const arr = {
        ids: this.selects_id
      }
      const result = await deleteUserList(arr)
      // console.log(result,'结果')
      if (result.code === 1) {
        this.$message.success('批量删除成功')

        this.getPersonnelList()
      }
    },

    async deleted (id) { // 人才列表删除单个
      // console.log('hhhhh',id)
      const arr = {
        ids: id
      }
      const result = await deleteUserList(arr)
      // console.log(result,'结果')
      if (result.code === 1) {
        this.$message.success('删除成功')

        this.getPersonnelList()
      }
    },
   
    handlePrint (id) {
      this.$refs.pdf.open(id)
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    refresh () {
      this.getPersonnelList()
    },
    selectionChange (e) {
      console.log('选择框改变时：', e)
      if (e.length > 0) {
        this.is_selectAll = 1
        this.selects_id = e.map((item, index) => {
          return item.id
        })
        console.log(this.selects_id)
      } else {
        this.is_selectAll = 0
      }
    },
    tableUpdate (e) {
      this.queryParams.page = e.currentPage
      this.getPersonnelList()
      console.log('表格发生变化时', e)
    },
    tableRowEdit (e) {
      console.log('拿到此行的数据', e)
    },
    tableRowDelete (e) {
      console.log(e)
    },
    // 查看详细信息
    handlePreview (e, flag = false) { // 进入评审
      console.log(e.id, flag)

      // this.$refs.lookInfo.open(e.id, flag)
      this.$router.push({ name: 'lookInfo', query: {
        id: e.id,
        flag
      }})
    },
    handlePreview1 (id) {
      console.log(id)
      // this.$refs.lookInfo.open(id, false)
      this.$router.push({ name: 'lookInfo', query: {
        id,
        flag: false
      }})
    },
    handleSearch () {
      this.getPersonnelList()
    },
    // 获取人才分类
    async getPersonnelType () {
      const res = await getPersonnelType(this.queryParams)
      this.options = res.data
    },
    // 获取人才列表
    async getPersonnelList () {
      const res = await getPersonnelList(this.queryParams)
      this.total = res.data.total
      this.tableData = res.data.data
    },
    handleUpload (id) {
      this.id = id
      this.dialogVisible = true
    },
    // 上传意见图片成功
    onSuccess (response, file, fileList) {
      this.college_opinion = response.data.url
      this.imageUrl = response.data.fullurl
    },
    submitIdea () {
      this.uploadIdea({
        id: this.id,
        college_opinion: this.college_opinion,
        college_import: this.college_import
      })
    },
    onError () {
      this.$message.error('上传失败')
    },
    // 上传意见
    async uploadIdea (data) {
      await uploadIdea(data)
      this.$message.success('保存成功')
      this.dialogVisible = false
      this.getPersonnelList()
    },
    // 个人信息下载
    async downloadResume (id) {
      let type = 3
      switch (this.role) {
        case '专家':
          type = 1
          break
        case '评委':
          type = 2
          break
        case '学院':
          type = 2
          break
        default:
          break
      }
      console.log(type)
      const downloadElement = document.createElement('a')
      const href = `http://xnjdhr.wm71.mttest.cn/api.php/Resume/resume?id=${id}&type=${type}`
      downloadElement.style.display = 'none'
      downloadElement.href = href
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
    },
    // 导出
    async exportPersonnelList () {
      const res = await exportPersonnelList(this.queryParams)
      downloadFile(res, '人才列表')
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 打开分配信息弹窗
    handleLookAllocation (id) {
      this.$refs.personList.open(id)
    },
     // 添加意见弹框
    // handleOpinion (id) {
    //    this.$refs.opinion.open(id)
    // },
  }
}
</script>

<style lang="scss" scoped>
.winClass{
  width:  40vw;
  height: 500px;
}
.action {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.header-box {
  margin-bottom: 14px;
  .el-col {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .box {
      margin-left: 15px;
      width: 144px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background: #f28e02;
      border-radius: 3px;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      &:nth-child(1) {
        margin-left: 0;
      }
      &:nth-child(2) {
        background-color: #6759f1;
      }
      &:nth-child(3) {
        background-color: #e85c47;
      }
      &:nth-child(4) {
        background-color: #36ae48;
      }
    }
    .export-btn {
      width: 100px;
      height: 44px;
      text-align: center;
      line-height: 44px;
      background: #2860c3;
      border: 1px solid #dcdcdc;
      border-radius: 3px;

      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #ffffff;
    }
  }
}

.avatar-uploader {
  margin-top: 20px;
  ::v-deep.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.opinion_input{
  color: #606266;
  &:hover {
      color: #409eff;
    }
}

.thank{
  position: absolute;
  top: 150px;
  left: 25%;
  width: 700px;
  height: 500px;
  background-image: url('../../assets/images/微信图片_20220802102401.png');
  background-size: 700px 500px;
  box-sizing: border-box;
  border-radius: 30px;
  border: 5px solid #b0b0b0;
  >p:nth-child(1){
    padding-left: 620px;
    font-size: 30px;
  }
  >p:nth-child(2){
    display: block;
    width: 650px;
    padding-left: 30px;
    text-indent: 2rem;
    line-height: 50px;
    font-size: 22px;
  }
  >p:nth-child(3){
    color: #21519d;
    margin-left: 420px;
    font-size: 22px;
    padding-top: 30px;
  }
  >p:nth-child(4){
    color: #21519d;
    margin-left: 460px;
    font-size: 22px;
  }
}
</style>
